<template>
  <div class="TaskTable">
    <div class="TaskTable_search">
      <span style="flex:1;text-align:left">*该区域显示的金额单位为万元</span>
      <span style="flex:1;text-align:right"><vxe-input v-model="filterName" type="search" placeholder="试试全表搜索" @keyup="searchEvent" /></span>
    </div>
    <vxe-table
      ref="xTable"
      v-loading="tableLoading"
      :data="tableData"
      border
      resizable
      show-overflow
      :height="tableHeight"
      show-footer
      :footer-method="footerMethod"
      :cell-style="cellStyle"
      :footer-cell-class-name="footerCellClassName"
      :header-cell-style="headerCellStyle"
    >
      <vxe-table-column
        :min-width="220"
        field="cEnterpriseName"
        title="乡镇"
        type="html"
      />

      <vxe-table-column
        :min-width="80"
        field="category"
        title="类型"
        type="html"
      />
      <vxe-table-column
        :min-width="90"
        field="yshj"
        title="拨付数(万元)"
      />
      <vxe-table-column
        :min-width="90"
        field="sjzc"
        title="支付数(万元)"
      />
      <vxe-table-column
        :min-width="240"
        field="sjzxl"
        title="资金使用率"
      >
        <template slot-scope="scope">
          <el-progress :percentage="Number(scope.row.sjzxl.split('%')[0])" />
        </template>
      </vxe-table-column>
      <vxe-table-column
        :min-width="70"
        field="status"
        title="任务进度"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.status===1"> <span class="commonSpan running" /> <span>运行中</span> </span>
          <span v-if="scope.row.status===&quot;&quot;"> <span class="commonSpan noRunning" /> <span>未开始</span></span>
          <span v-if="scope.row.status===3"> <span class="commonSpan delay" /> <span>延期</span></span>
          <span v-if="scope.row.status===2"> <span class="commonSpan finish" /> <span>结束</span></span>
        </template>
      </vxe-table-column>
      <vxe-table-column field="do" title="操作" width="80">
        <template v-slot="{ row }">
          <el-button type="text" style="padding: 0px;" @click="showTableDialog(row)">查看</el-button>
        </template>
      </vxe-table-column>
      <template #empty>
        <span style="color: red;">
          <img style="height:150px" src="../../../../assets/images/monthReport/noReport.png">
          <div>暂无报表数据</div>
        </span>
      </template>
    </vxe-table>
    <!-- 分页 -->
    <div class="commonTable_pagination">
      <div class="commonTable_pagination_right">
        <el-pagination
          background
          :current-page="pageIndex"
          :page-sizes="[50, 100, 150, 200]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script>
import XEUtils from 'xe-utils';
export default {
  data() {
    return {
      filterName: '',
      tableHeight: '',
      tableData: [],
      originTableData: [],
      tableLoading: true,
      pageIndex: 1,
      pageSize: 50,
      count: 0
    };
  },
  mounted() {
    this.tableHeight =
      window.innerHeight - this.$refs.xTable.$el.offsetTop - 190;
  },

  methods: {
    showTableDialog(row) {
      this.$parent.$refs.tableDialog.cEnterpriseName = row.cEnterpriseName;
      this.$parent.$refs.tableDialog.title = row.cEnterpriseName + '预算明细表';
      this.$parent.$refs.tableDialog.iProgramguids = row.iProgramguids;
      this.$parent.$refs.tableDialog.dialogVisible = true;
      this.$parent.$refs.tableDialog.activeName = '0';
      this.$parent.$refs.tableDialog.getHeader();
    },
    footerCellClassName({ $rowIndex, columnIndex }) {
      if (columnIndex === 2 || columnIndex === 3) {
        return 'footer-col-right';
      }
    },
    searchEvent() {
      // 去前后空格 大小写 字符串
      const filterName = (this.filterName + '').trim().toLowerCase();
      if (filterName) {
        const filterRE = new RegExp(filterName, 'gi');
        const searchProps = ['cEnterpriseName', 'category'];
        const rest = this.originTableData.filter(item => searchProps.some(key => (item[key] + '').toLowerCase().indexOf(filterName) > -1));
        this.tableData = rest.map(row => {
          const item = Object.assign({}, row);
          searchProps.forEach(key => {
            item[key] = (item[key] + '').replace(filterRE, match => `<span class="keyword-lighten">${match}</span>`);
          });
          return item;
        });
      } else {
        this.tableData = this.originTableData;
      }
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.tableLoading = true;
      this.$parent.$parent.$refs.leftContainer.getProjectDetialXz();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.tableLoading = true;
      this.$parent.$parent.$refs.leftContainer.getProjectDetialXz();
    },
    footerMethod({ columns, data }) {
      const footerData = [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '合计';
          } else {
            if (
              column.property === 'category' || column.property === 'sjzxl' ||
               column.property === 'status' || column.property === 'do'
            ) {
              return '--';
            } else {
              return XEUtils.sum(data, column.property);
            }
          }
        })
      ];
      return footerData;
    },
    cellStyle({ row, rowIndex, column }) {
      if (column.property === 'yshj' || column.property === 'sjzc') {
        return {
          textAlign: 'right'
        };
      } else {
        return {
          textAlign: 'center'
        };
      }
    },
    headerCellStyle({ column, columnIndex }) {
      return {
        textAlign: 'center',
        backgroundColor: 'rgb(64, 158, 255)',
        color: '#fff',
        borderBottom: '1px solid #fff'
      };
    }
  }

};
</script>

<style lang='scss' scoped>
 .TaskTable_search{
    padding: 3px;
    display: flex;
 }
.TaskTable_search /deep/ .vxe-input {
    font-size: 14px;
    height: 30px;
}
  .TaskTable
  /deep/
  .vxe-table
  .vxe-body--column.col--ellipsis
  > .vxe-cell
  .vxe-tree-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left !important;
}
.TaskTable /deep/ .vxe-table .vxe-body--column.col--ellipsis,
.vxe-table.vxe-editable .vxe-body--column,
.vxe-table .vxe-footer--column.col--ellipsis,
.vxe-table .vxe-header--column.col--ellipsis {
  height: 30px !important;
}
.commonTable_pagination{
  text-align: right
}
.commonSpan{
  width: 6px;
  height: 6px;
  opacity: 1;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}
.running{
   background: #1880ff;
}
.noRunning{
  background: #d8d8d8;
}
.delay{
  background: #ff4d4f
}
.finish{
  background: #52c41a;
}

</style>
